<template>
	<view class="orderDetail">
		<view class='order'>
			<view class='general dFlex jBetween_aCenter'>
				<view class='infoLeft dFlex jStart_aCenter'>
					<view class='kind sty1' v-if="datas.order_type == '1'">免拆清洗</view>
					<view class='kind sty2' v-if="datas.order_type == '2'">拆装清洗</view>
					<view class='flour'>{{datas.address}}</view>
					<!-- <view class='time'>18:00前到达</view> -->
				</view>
				<view class='status sty1' v-if="datas.order_status == '3'">待上门</view>
				<view class='status sty2' v-if="datas.order_status == '4'">进行中</view>
				<view class='status sty3' v-if="datas.order_status == '5'">已完成</view>
			</view>
			<view class="info">
				<view class="user dFlex jBetween_aCenter">
					<view class="userInfo">
						<text>{{datas.trueName}}</text>
						<text class="phone">尾号{{datas.tel.substr(-4)}}</text>
					</view>
					<view class="callIcon imgPublic" @tap.stop='call(datas.tel)'>
						<image src="https://wx.gdxixiashi.com/public/images/worker/dianhua@2x.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="line dFlex jStart_aStart" @click="copy(datas.area+datas.address)">
					<view>上门地址：</view>
					<text>{{datas.area+datas.address}}<text class="toast" style="color:#1d69ff;margin-left:10px;">(点击复制)</text></text>
				</view>
				<view class="line dFlex jStart_aStart">
					<view>上门时间：</view>
					<text>{{datas.order_time}}</text>
				</view>
				<view class="line dFlex jStart_aStart">
					<view>服务人员：</view>
					<text>{{datas.store_name}}</text>
				</view>
				<view class="line dFlex jStart_aStart" v-if='datas.order_type != "3"'>
					<view>清洗方式：</view>
					<text v-if='datas.order_type == "1"'>免拆清洗</text>
					<text v-if='datas.order_type == "2"'>拆装清洗</text>
				</view>
				<view class="line dFlex jStart_aStart">
					<view>产品规格：</view>
					<!-- <text>{{datas.spec}}</text> -->
					<view class='shops'>
						<view class="shopOne dFlex jStart_aStart" v-for="(item2,index2) in datas.products" :key='index2'>
							<view class="shopImg imgPublic">
								<image :src="item2.list_img"></image>
							</view>
							<view class="shopInfo">
								<view class="shopname">{{item2.product_name}}</view>
								<view class='spec'>{{item2.specs_name}} x{{item2.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderLine dFlex jBetween_aCenter">
				<text>订单金额</text>
				<view class="lineVal sty1">￥<text>{{datas.product_total}}</text></view>
			</view>
			<view class="orderLine dFlex jBetween_aCenter">
				<text>本单预计收入</text>
				<view class="lineVal">￥{{datas.give_amount}}</view>
			</view>
		</view>
		<view class="otherInfo">
			<view class="tit">订单信息</view>
			<view class='info'>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">订单编号</view>
					<view class="lineVal dFlex jEnd_aCenter">
						{{datas.order_number}}
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">下单时间</view>
					<view class="lineVal dFlex jEnd_aCenter">
						{{datas.create_time}}
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter" >
					<view class="lineTit">预约上门时间</view>
					<view class="lineVal dFlex jEnd_aCenter">
						{{datas.order_time}}
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter" v-if="datas.order_status == '5'">
					<view class="lineTit">完成时间</view>
					<view class="lineVal dFlex jEnd_aCenter">
						{{datas.end_time}}
					</view>
				</view>
			</view>
		</view>
		<!-- 追加费用弹窗 -->
		<view class="zz dFlex jCenter_aCenter" v-if="appendFlag">
			<view class="appendMy">
				<view class="title">修改费用</view>
				<view class='content'>
					<view class="line dFlex jStart_aCenter" style="margin-bottom: 10px;">
						<text>类型</text>
						<view class='ipt' style="background: white;">
							<radio-group class="uni-flex uni-row radio-group" v-model="change_type" style="flex-wrap: wrap;" @change="changeType">
								<radio value="1" class="radio" style="margin-right: 10px;" color='#2d67d2' :checked="change_type=='1'?true:false">追加</radio>
							    <radio value="2" class="radio" color='#2d67d2' :checked="change_type=='2'?true:false">退回</radio>
							</radio-group>
						</view>
					</view>
					<view class="line dFlex jCenter_aCenter">
						<text>金额</text>
						<view class='ipt'>
							<input type="number" v-model="amount" placeholder="请输入金额">
						</view>
					</view>
				</view>
				<view class="appendBtns dFlex jBetween_aCenter">
					<view class='btn' @tap='appendFlag = false'>取消</view>
					<view class='btn sure' @tap='appendOrder'>确定</view>
				</view>
			</view>
		</view>
		<view class="btns dFlex jAround_aCenter">
			<!-- 待上门 -->
			<view class="btn len1 sty1" v-if="datas.order_status == '3'" @tap='cancelOrder'>取消订单</view>
			<!-- <view class="btn len1 sty1">部分退款</view> -->
			<view class="btn len1 sty2" v-if="datas.order_status == '3' || datas.order_status == '4'" @tap.stop='appendMy'>修改费用</view>
			<!-- 进行中 -->
			<!-- <view class="btn len2 sty1">部分退款</view> -->
			<!-- <view class="btn len2 sty2" v-if="datas.order_status == '4'">确认完成</view> -->
		</view>
	</view>
</template>

<script>
	import qqmap from '../tools/qqmap-wx-jssdk.js';
	export default {
		data() {
			return {
				orderId:'',
				datas:{
					tel:'',
				},
				appendFlag:false,
				amount:'',//追加的金额
				change_type:1,
				lat:'',
				lng:'',
			};
		},
		onLoad(e) {
			this.orderId = e.orderId?e.orderId:'';
			this.initData();
		},
		methods:{
			// 复制文案
			copy(content){
				console.log(content);
				uni.setClipboardData({
					data:content,
				})
			},
			// 修改费用类型
			changeType(e){
				this.change_type = e.detail.value;
			},
			// 订单详情
			initData(){
				this.tool.getData('Store/orderInfo',{
					orderId:this.orderId,
				}).then(res=>{
					console.log(res);
					if(res){
						res.spec = '';
						res.products.map((item,index)=>{
							res.spec = index == res.products.length-1?res.spec+item.specs_name:res.spec+item.specs_name+'、';
						})
						this.datas = res;
						let qqmapsdk = new qqmap({
							key: 'CYCBZ-FP2WZ-TNJXE-ZFJJR-N22Q6-ONBCR'
						});
						qqmapsdk.geocoder({
							//获取表单传入地址
							address:res.area + res.address, //这里写的是地址  地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
							success: locate=> {//成功后的回调
								if(locate.message == 'query ok'){
									this.lat = locate.result.location.lat;
									this.lng = locate.result.location.lng;
								}
							},
							fail: function (error) {
								console.error(error);
							},
							complete: function (res2) {
								// console.log(res);
							}
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 唤起导航
			daohang(){
				uni.openLocation({
					latitude:this.lat,
					longitude:this.lng,
					name:this.datas.address,
					scale:15,
					address:this.datas.area + this.datas.address
				})
			},
			// 追加金额
			appendMy(){
				this.appendFlag = true;
			},
			// 拨打电话
			call(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
				})
			},
			// 订单追加费用
			appendOrder(){
				uni.showModal({
					content:'确定修改该订单费用？',
					success: (op) => {
						if(op.confirm){
							if(!this.amount){
								uni.showToast({
									title:'修改的费用不能为空',
									icon:"none"
								})
								return;
							}
							this.tool.getData('Store/orderChange',{
								type:'2',
								orderId:this.orderId,
								amount:this.amount,
								change_type:this.change_type,
							}).then(res=>{
								console.log(res);
								if(res){
									uni.showToast({
										title:'修改成功',
										icon:"success"
									})
									this.appendFlag = false;
									this.initData();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 取消订单
			cancelOrder(){
				uni.showModal({
					content:'确定取消该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('Store/orderChange',{
								type:1,
								orderId:this.orderId
							}).then(res=>{
								console.log(res);
								if(res){
									uni.navigateBack({
										delta:1
									})
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.orderDetail{
		width: 100%;
		padding: 12px 3%;
		box-sizing: border-box;
		.zz{
			.appendMy{
				width: 86%;
				background: white;
				border-radius: 5px;
				overflow: hidden;
				.appendBtns{
					width: 100%;
					border-top: 1px solid #DDDDDD;
					.btn{
						flex:1;
						text-align: center;
						color: #666666;
						padding: 12px 0;
						letter-spacing: 4px;
					}
					.sure{
						color: white;
						background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
					}
				}
				.content{
					width: 100%;
					padding: 12px 24px 20px;
					box-sizing: border-box;
					color:#666666;
					.ipt{
						flex: 1;
						margin-left: 12px;
						padding:12px;
						box-sizing: border-box;
						border-radius: 4px;
						background: rgba(160, 160,160, 0.1);
					}
				}
				.title{
					width: 100%;
					padding: 16px 0;
					font-size: 18px;
					font-weight: bold;
					color: #666666;
					text-align:center;
				}
			}
		}
		.btns{
			width: 100%;
			padding: 12px 4%;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				padding: 10px 0;
				border: 1px solid transparent;
				border-radius: 50px;
				text-align: center;
			}
			.len1{
				width: 30%;
			}
			.len2{
				width: 45%;
			}
			.sty1{
				color: #999999;
				background: white;
			}
			.sty2{
				color: white;
				background: linear-gradient(-45deg,#1d69ff 0%, #609ff8 100%);
			}
			.sty3{
				color: #1664FF;
				border-color: #1664FF;
			}
		}
		.otherInfo{
			width: 100%;
			background:white;
			border-radius: 4px;
			padding: 0 12px;
			box-sizing: border-box;
			.tit{
				width:100%;
				padding: 16px 0;
				font-weight: bold;
			}
			.info{
				width:100%;
				padding: 0 0 6px;
				.line{
					padding: 6px 0;
					width: 100%;
					.lineTit{
						color: #666666;
						width: max-content;
					}
					.lineVal{
						flex: 1;
						margin-left: 12px; 
						.showVal{
							width: max-content;
						}
						.blue{
							color: #1664FF;
						}
						.rightIcon{
							width: 16px;
							margin-left: 6px;
						}
						.tx{
							width: 32px;
							height: 32px;
							border-radius: 50%;
							overflow: hidden;
							image{
								height: 100%;
							}
						}
					}
				}
			}
		}
		.order{
			width: 100%;
			padding:12px 16px 12px 0;
			box-sizing:border-box;
			background:white;
			margin-bottom:12px;
			border-radius: 5px;
			/* .btns{
				width: 100%;
				.btn{
					width: max-content;
					padding: 4px 12px;
					border-radius: 50px;
					margin-left:12px;
					border: 1px solid transparent;
				}
				.sty1{
					color: white;
					background: linear-gradient(0deg,#2d67d2 0%, #609ff8 100%);
				}
				.sty2{
					border-color: #2d67d2;
					color: #2d67d2;
				}
				.sty3{
					color: #999999;
					border-color: #999999;
				}
			} */
			.orderLine{
				width: 100%;
				margin-bottom: 10px;
				color: #222222;
				padding: 0 0 0 16px;
				box-sizing: border-box;
				.lineVal{
					font-size: 16px;
				}
				.sty1{
					font-size: 12px;
					color: #FF3B2F;
					text{
						font-size: 18px;
					}
				}
			}
			.orderLine:last-child{
				margin: 0;
			}
			.info{
				width: 100%;				
				padding: 30px 0 30px 16px;
				box-sizing: border-box;
				.line{
					font-size: 12px;
					color: #999999;
					margin-top: 10px;
					.shops{
						flex:1;
						.shopOne{
							width:100%;
							margin-bottom: 12px;
							.shopInfo{
								flex:1;
								.shopname{
									color:#333333;
									margin-bottom:6px;
									font-size:14px;
								}
							}
							.shopImg{
								width: 40px;
								height: 40px;
								border-radius: 5px;
								overflow: hidden;
								margin-right: 12px;
								image{
									width:100%;
									height:100%;
								}
							}
						}
						.shopOne:last-child{
							margin: 0;
						}
					}
					>text{
						flex: 1;
						font-size: 15px;
						color: #000033;
						.toast{
							color: #999999;
							font-size: 12px;
						}
					}
				}
				.user{
					font-weight: bold;
					.phone{
						margin-left: 6px;
					}
					.userInfo{
						flex: 1;
					}
					.callIcon{
						width: 16px;
					}
				}
			}
			.general{
				width: 100%;
				.infoLeft{
					flex: 1;
					.kind{
						color: white;
						width: max-content;
						border-radius: 0 50px 50px 0;
						background: linear-gradient(to right,#2D67D2,#609FF8);
						padding: 4px 10px;
						font-size: 11px;
					}
					.sty1{
						background: linear-gradient(to right,#2D67D2,#609FF8);
					}
					.sty2{
						background: linear-gradient(-45deg,#ffa132 0%, #ff5400 100%);
					}
					.flour{
						flex: 1;
						font-size: 18px;
						margin: 0 10px;
						font-weight: bold;
					}
				}
				.status{
					width:max-content;
					font-size: 12px; 
					padding:5px;
					border-radius:5px;
				}
				>.sty1{
					color:#F8711F;
					background:#fef1e9;
				}
				>.sty2{
					color: #2D67D2;
					background: #ebf0fa;
				}
				>.sty3{
					color: #999999;
					background: #f5f5f5;
				}
			}
		}
	}
</style>
